<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ text.ID ? (text.listType == 3 ? '查看团队' : text.listType == 4 ? '审批' : '修改团队') : '新增团队' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form" v-if="text.listType == 1 || text.listType == 2">
					<a-form-item label="假期">
						<a-select :disabled="!text.ID ? false : true" :allowClear="true" @change="SessionFun"
							v-decorator="['SessionID', { rules: [{ required: true, message: '请选择假期' }] }]"
							placeholder="全部" optionFilterProp="children" showSearch>
							<a-select-option v-for="(item, index) in SessionIDList" :key="item.ID" :value="item.ID">
								{{ item.Name }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item>
						<span class="autolabel" slot="label">团队名称</br>(个人填写本人姓名即可)</span>
						<a-input v-decorator="['Title', { rules: [{ required: true, message: '请输入团队主题' }] }]" />
					</a-form-item>
					<a-form-item label="活动主题">
						<a-input v-decorator="['Theme', { rules: [{ required: true, message: '请输入标题' }] }]" />
					</a-form-item>
					<a-form-item label="团队负责人" v-if="currentType == 'manager'">
						<a-select showSearch
							v-decorator="['ChargeUserNo', { rules: [{ required: true, message: '请选择负责人' }] }]"
							optionFilterProp="children" style="width: 100%" @search="fetchUser"
							:filterOption="filterOption">
							<a-select-option v-for="(item, index) in userList" :key="item.UserNo">
								{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="团队负责人手机号">
						<a-input
							v-decorator="['ChargeUserPhone', { rules: [{ required: true, message: '请输入负责人手机号' }] }]" />
					</a-form-item>
					<!-- <a-form-item v-if="!text.ID"> -->
					<a-form-item>
						<span class="autolabel" slot="label">指导教师</br>(团队和个人均可无指导老师)</span>
						<a-select mode="multiple" showSearch
							v-decorator="['TeacherUserNoArr', { rules: [{ required: false, message: '请选择指导老师' },{ validator: maxValidator }] }]"
							optionFilterProp="children" style="width:375px;margin-right:10px;" @search="fetchTeacher"
							:filterOption="filterOption" placeholder="请输入工号或姓名搜索">
							<a-select-option v-for="(item, index) in TeacherList" :key="item.UserNo">
								{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}
							</a-select-option>
						</a-select>
						<span class="tipremark">最多选择两位指导老师</span>
					</a-form-item>
					<a-form-item label="实践类型">
						<a-select :allowClear="true"
							v-decorator="['TypeID', { rules: [{ required: true, message: '请选择实践类型' }] }]"
							placeholder="全部" optionFilterProp="children" showSearch>
							<a-select-option v-for="(item, index) in TypeIDList" :key="item.ID" :value="item.ID">
								{{ item.Name }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="申请类型">
						<a-select :allowClear="true"
							v-decorator="['ApplyType', { rules: [{ required: true, message: '请选择申请类型' }] }]"
							placeholder="全部" optionFilterProp="children" showSearch>
							<!-- <a-select-option v-for="(item, index) in ApplyTypeList" :key="item.Key" :value="item.Key">{{ item.Value }}</a-select-option> -->
							<a-select-option v-for="(item, index) in ApplyTypeList" v-if="item.Key==1||item.Key==2" :key="item.Key"
								:value="item.Key">{{ item.Value }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="实践主题">
						<a-select :allowClear="true"
							v-decorator="['ThemeID', { rules: [{ required: true, message: '请选择实践主题' }] }]"
							placeholder="全部" optionFilterProp="children" showSearch>
							<a-select-option v-for="(item, index) in ThemeIDList" :key="item.ID" :value="item.ID">
								{{ item.Name }}
							</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-model-item label="所属学院" prop="DepartCode">
						<a-select v-decorator="['DepartCode', { rules: [{ required: true, message: '请选择所属学院' }] }]"
							showSearch optionFilterProp="children" style="width:220px;margin-right:10px;">
							<a-select-option v-for="(item, index) in DepartCodeList" :key="item.Code"
								:value="item.Code">{{ item.Name }}</a-select-option>
						</a-select>
						<span class="tipremark">专项须选择对应专项所属学院，而非您所在学院</span>
					</a-form-model-item>
					<a-form-model-item label="活动地点" prop="CityID">
						<a-select v-decorator="['ProvinceID', { rules: [{ required: true, message: '请选择省份' }] }]"
							showSearch @change="ProvinceFun" optionFilterProp="children" style="width:45%">
							<a-select-option v-for="(item, index) in ProvinceList" :key="item.ID" :value="item.ID">
								{{ item.Name }}
							</a-select-option>
						</a-select>
						-
						<a-select v-decorator="['CityID', { rules: [{ required: true, message: '请选择城市' }] }]" showSearch
							optionFilterProp="children" style="width:45%">
							<a-select-option v-for="(item, index) in CityList" :key="item.ID" :value="item.ID">
								{{ item.Name }}
							</a-select-option>
						</a-select>
					</a-form-model-item>
					<tengdForm :data="formList" @tap="searchValueFun" ref="tengdForm"></tengdForm>
					<a-form-item class="fixed-bottom">
						<a-popconfirm v-if="!currentID && currentType=='user'" title="暂存后不会提交，请添加完成员后在列表页点击提交按钮提交!"
							ok-text="好的" cancel-text="取消" @confirm="confirm" @cancel="cancel">
							<a-button type="primary" html-type="submit">暂存</a-button>
						</a-popconfirm>
						<a-button v-if="!(!currentID && currentType=='user')" type="primary" @click="handleSubmit">
							{{ !text.ID ? '确认添加' : '确认修改' }}
						</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
				<a-form :form="form" v-if="text.listType == 4">
					<a-form-model-item label="审核状态" prop="isAdopt">
						<a-radio-group name="radioGroup"
							v-decorator="['isAdopt', { rules: [{ required: true, message: '请选择审核状态' }] }]">
							<a-radio :value="true">通过</a-radio>
							<a-radio :value="false">驳回</a-radio>
						</a-radio-group>
					</a-form-model-item>
					<a-form-model-item label="审核意见" prop="comment">
						<a-input type="textarea" :auto-size="global.textareaHeight"
							v-decorator="['comment', { rules: [{ required: !form.getFieldValue('isAdopt'), message: '请输入审核意见' }] }]" />
					</a-form-model-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">确定</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
				<a-timeline class="detailtimeline" v-show="text.listType == 3">
					<a-timeline-item>
						<h4>基础信息</h4>
						<a-list class="listarea" size="small" bordered :data-source="detailList">
							<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
								<div class="infotit">{{ item.key }} :</div>
								<div class="flex-1">
									<div class="infocell">{{ item.val }}</div>
								</div>
							</a-list-item>
						</a-list>
					</a-timeline-item>
					<a-timeline-item v-if="formList.data">
						<h4>其他信息</h4>
						<a-list class="listarea" size="small" bordered :data-source="formList.data">
							<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
								<div class="infotit">{{ item.Name }} :</div>
								<div class="flex-1">
									<div class="infocell" v-for="(file, n) in item.Value.split(',')" :key="n"
										v-if="item.FieldType == 5 || item.FieldType == 6">
										{{ file.split('|')[0] }}
										<a-icon type="download" v-if="file" @click="downloadFile(file, 1)"
											style="height: 12px;vertical-align: top;margin-top: 4px;cursor: pointer;">
										</a-icon>
									</div>
									<div class="infocell"
										v-if="!(item.FieldType == 5 || item.FieldType == 6 || item.FieldType == 7 || item.FieldType == 8)">
										{{ item.Value }}
									</div>
									<div class="infocell" v-if="item.FieldType == 7">
										{{ item.Value ? moment(item.Value).format('YYYY-MM-DD') : '' }}
									</div>
									<div class="infocell" v-if="item.FieldType == 8">
										{{ item.Value ? (item.Value.indexOf('2020-10-10') > -1 ? moment(item.Value).format('HH:mm:ss') : moment('2020-10-10 ' + item.Value).format('HH:mm:ss')) : '' }}
									</div>
								</div>
							</a-list-item>
						</a-list>
					</a-timeline-item>
					<a-timeline-item>
						<h4>成员信息</h4>
						<el-table :data="memberData" border highlight-current-row style="width: 100%;">
							<el-table-column type="index" label="序号" width="60"></el-table-column>
							<el-table-column prop="UserName" label="姓名" min-width="160"></el-table-column>
							<el-table-column prop="UserNo" label="学号" min-width="100"></el-table-column>
							<el-table-column prop="IsCaptain" label="负责人" min-width="100">
								<template slot-scope="scope">
									
									<a-tag v-if="detail.ApplyTypeName!='个人'" :color="scope.row.IsCaptain?'blue':'red'">{{ scope.row.IsCaptain?"队长":"队员" }}
									</a-tag>
								</template>
							</el-table-column>
						</el-table>
					</a-timeline-item>
					<a-timeline-item>
						<h4>指导老师信息</h4>
						<el-table :data="teacherData" border highlight-current-row style="width: 100%;">
							<el-table-column type="index" label="序号" width="60"></el-table-column>
							<el-table-column prop="UserName" label="姓名" min-width="160"></el-table-column>
							<el-table-column prop="UserNo" label="工号" min-width="100"></el-table-column>
						</el-table>
					</a-timeline-item>
					<a-timeline-item v-for="(v, i) of flowData" :key="v.ID" v-if="flowData.length > 0">
						<h4 class="gj" :style="{ color: '#ff4071' }">
							<div class="tit">审核流程：{{ v.FlowTypeName }} --
								{{ v.IsAdopt == null ? '审核中' : v.IsAdopt ? '通过' : '驳回' }}
							</div>
							<div class="followContent"></div>
						</h4>
						<h4 class="gj" style="display: flex" v-if="v.ExamUserData && v.ExamUserData.length > 0">
							<div class="tit">审核人：</div>
							<div class="cell flowusercon">
								<div class="flowuserlist" v-for="(flowitem, flowindex) in v.ExamUserData"
									:key="flowindex">
									{{ flowitem.Name }} - {{ flowitem.UserNo }} - {{ flowitem.DepartName }}
								</div>
							</div>
						</h4>
						<h4 v-if="v.IsAdopt != null" class="gj" style="display: flex">
							<div class="tit">审核人：</div>
							<div class="cell">{{ v.ExamUserName }}</div>
							&nbsp;&nbsp;
							<div class="tit">审核时间：</div>
							<div class="cell">{{ v.ExamTime }}</div>
						</h4>
						<h4 v-if="v.IsAdopt != null" class="gj" style="display: flex">
							<div class="tit">审核内容：</div>
							<div class="cell">{{ v.ExamComment }}</div>
						</h4>
					</a-timeline-item>
				</a-timeline>
				<div style="text-align: center;" v-if="text.listType == 3&&text.currentState==0&&$route.path.includes('Home')">
					<a-button type="primary" style="width: 200px;" @click="detailShen(texttext)">审批</a-button>
				</div>

			</div>

		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import Cache from '@/utils/cache';
	import tengdForm from '@components/SearchForm/tengdForm.vue';
	import {
		GetDepartList,
		GetUserList,
		ManagePracticeTeam,
		UserPracticeTeam,
		CommonDoGetPracticeTeamApplyTypeList,
		CommonDoGetPracticeTeamTypeList,
		CommonDoGetPracticeSessionThemeList,
		CommonDoGetProvinceList,
		CommonDoGetCityList,
		UserPracticeTeamFlow,
		ManagePracticeTeamFlow,
		Common
	} from '@/api/follow';
	export default {
		props: {
			text: Object,
			currentType: String
		},
		components: {
			tengdForm
		},
		watch: {
			text: function(text) {
				console.log(text);
				this.getList();
				if (!text.ID) {
					this.getOtherList();
					this.currentID = '';
				} else {
					this.currentID = text.ID;
					this.SessionFun(text.SessionID);
					if (text.listType == 2 || text.listType == 3) {
						this.getDetail();
					}
				}
			}
		},
		data() {
			return {
				loading: false,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				currentID: '',
				formList: {},
				formListItem: {},
				SessionIDList: [],
				ThemeIDList: [],
				TypeIDList: [],
				ApplyTypeList: [],
				userList: [],
				DepartCodeList: [],
				ProvinceList: [],
				CityList: [],
				detail: {},
				formData: [],
				TeacherList: [],
				detailList: [],
				flowData: [],
				teacherData: [],
				memberData: [],
				requestUrl: this.global.requestUrl,
				texttext: {}
			};
		},
		created() {},
		methods: {
			moment,
			maxValidator(rule, value, callback) {
				if (value && value.length > 2) {
					callback('至多选择两名指导教师');
				} else {
					callback();
				}
				callback();
			},
			detailShen(text) {
				console.log('sssss');
				text.flowID = this.text.flowID;
				this.$emit('shenpiFun', text);
			},
			downloadFile(item, type) {
				window.open(this.requestUrl + item.split('|')[1], '_blank');
			},
			filterOption(input, option) {
				return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
			},
			async SessionFun(e){
				let res = await CommonDoGetPracticeSessionThemeList({
					sessionID: e
				});
				this.ThemeIDList = res.data.data;
			},
			async getList() {
				// console.log(this.text);
				// let res = await CommonDoGetPracticeSessionThemeList({
				// 	sessionID: this.text.sessionID
				// });
				// this.ThemeIDList = res.data.data;
				let res1 = await CommonDoGetPracticeTeamApplyTypeList();
				console.log(res1.data.data)
				this.ApplyTypeList = res1.data.data;
				let res2 = await CommonDoGetPracticeTeamTypeList();
				this.TypeIDList = res2.data.data;
				let res3 = await GetDepartList();
				this.DepartCodeList = res3.data.data;
				let res4 = await CommonDoGetProvinceList();
				this.ProvinceList = res4.data.data;
				let res5 = await Common('DoGetEnablePracticeSessionList', {})
				this.SessionIDList = res5.data.data
			},
			async ProvinceFun(e) {
				if (e && e != this.form.getFieldValue('CityID')) {
					this.form.setFieldsValue({
						CityID: ''
					});
					let res = await CommonDoGetCityList({
						provinceID: e
					});
					this.CityList = res.data.data;
				}
			},
			async fetchUser(value) {
				let myReg = /^[^a-zA-Z]+$/;
				if (value && value.length > 1) {
					let data = {};
					data.key = value;
					data.top = 20;
					let res = await GetUserList(data);
					this.userList = res.data.data;
				}
			},
			async fetchTeacher(value) {
				if (value && value.length > 0) {
					let data = {};
					data.key = value;
					data.top = 20;
					data.type = 2
					let res = await GetUserList(data);
					this.TeacherList = res.data.data;
				}
			},
			searchValueFun(name, value) {
				this.formListItem = {
					...this.formListItem,
					[name]: value
				};
				console.log(this.formListItem)
			},
			async getOtherList() {
				let res = this.currentType == 'manager' ? await ManagePracticeTeam('DoGetFormList', {}) :
					await UserPracticeTeam('DoGetFormList', {});
				this.formList = {
					data: res.data.data,
					time: new Date()
				};
			},
			async getDetail() {
				let data = {};
				data.id = this.currentID;
				let res = {}
				// let res = this.currentType == 'manager' ?  : await UserPracticeTeam('DoGetDetail', data);
				if (this.currentType == 'manager') {
					res = await ManagePracticeTeam('DoGetDetail', data)
				}
				if (this.currentType == 'user') {
					res = await UserPracticeTeam('DoGetDetail', data)
				}
				if (this.currentType == 'userFlow') {
					res = await UserPracticeTeamFlow('DoGetDetail', data)
				}
				if (this.currentType == 'collegeFlow' || this.currentType == 'schoolFlow') {
					res = await ManagePracticeTeamFlow('DoGetDetail', data)
				}
				this.detail = res.data.data;
				if (res.data.teacherData.length > 0) {
					let arr = []
					for (let i = 0; i < res.data.teacherData.length; i++) {
						arr.push(res.data.teacherData[i].UserNo)
						this.TeacherList.push({
							UserNo: res.data.teacherData[i].UserNo,
							Name: res.data.teacherData[i].UserName
						})
					}
					setTimeout(() => {
						this.form.setFieldsValue({
							TeacherUserNoArr: arr,
						})
					})
				}
				if (this.text.listType == 2) {
					let detail = res.data.data;
					this.ProvinceFun(detail.ProvinceID);
					this.userList = [{
						UserNo: detail.ChargeUserNo,
						Name: detail.ChargeUserName
					}];
					if(this.ThemeIDList.length===0){
						this.ThemeIDList = [{
							ID: detail.ThemeID,
							Name: detail.ThemeName
						}];
					}
					setTimeout(() => {
						this.form.setFieldsValue({
							SessionID: detail.SessionID,
							ThemeID: detail.ThemeID,
							Title: detail.Title,
							Theme: detail.Theme,
							ChargeUserNo: detail.ChargeUserNo,
							ChargeUserPhone: detail.ChargeUserPhone,
							TypeID: detail.TypeID,
							ApplyType: detail.ApplyType,
							DepartCode: detail.DepartCode,
							ProvinceID: detail.ProvinceID,
							CityID: detail.CityID
						});
						if (res.data.formData.length > 0) {
							this.formList = {
								data: res.data.formData,
								time: new Date()
							};
							res.data.formData.map((item, index, arr) => {
								this.formListItem = {
									...this.formListItem,
									[item.ID]: item.Value
								};
							});
						}
					}, 100);
				}
				if (this.text.listType == 3) {
					this.texttext = res.data.data;
					this.flowData = res.data.flowData;
					this.teacherData = res.data.teacherData;
					this.memberData = res.data.memberData;
					if (res.data.formData.length > 0) {
						this.formList = {
							data: res.data.formData,
							time: new Date()
						};
						res.data.formData.map((item, index, arr) => {
							this.formListItem = {
								...this.formListItem,
								[item.ID]: item.Value
							};
						});
					}
					let {
						No,
						SessionName,
						ThemeName,
						Title,
						Theme,
						ChargeUserNo,
						ChargeUserName,
						ChargeUserPhone,
						TypeName,
						ApplyTypeName,
						DepartName,
						CityName,
						ProvinceName
					} = this.detail;
					let middleKey = [];
					let miidle = [];
					middleKey = [
						'编号',
						'假期',
						'团队名称',
						'活动主题',
						'团队负责人',
						'实践类型',
						'申请类型',
						'实践主题',
						'所属学院',
						'活动地点',
					];
					miidle = [
						No,
						SessionName,
						Title,
						Theme,
						ChargeUserNo + ' / ' + ChargeUserName + ' / ' + ChargeUserPhone,
						TypeName,
						ApplyTypeName,
						ThemeName,
						DepartName,
						ProvinceName+' - '+CityName
					];
					this.detailList = miidle.map((v, i) => {
						return {
							key: middleKey[i],
							val: v
						};
					});
				}
			},
			closeFunction(data) {
				this.form.resetFields();
				this.$emit('closeFun', data);
			},
			confirm(e) {
				this.handleSubmit(e);
			},
			cancel(e) {},
			handleSubmit(e) {
				this.form.validateFields(async (err, values) => {
					if (!err) {
						if (this.$refs.tengdForm) {
							this.$refs.tengdForm.form.validateFields(async (err1, values1) => {
								if (!err1) {
									let data = {};
									data = {
										...values,
										...this.formListItem
									};
									let res = {};
									// data.SessionID = this.text.sessionID;
									console.log(values);
									// return
									if (values.TeacherUserNoArr) {
										data.TeacherUserNo = values.TeacherUserNoArr.join(',');
									}
									if (!this.currentID) {
										res = this.currentType == 'manager' ?
											await ManagePracticeTeam('DoAdd', data) :
											await UserPracticeTeam('DoAdd', data);
									}
									if (this.text.listType == 4) {

										// data.id =this.currentID;
										data.id = this.text.flowID ? this.text.flowID : this
											.currentID;
										if (this.currentType == 'userFlow') {
											res = await UserPracticeTeamFlow('DoExam', data);
										}
										if (this.currentType == 'collegeFlow' || this
											.currentType == 'schoolFlow') {
											res = await ManagePracticeTeamFlow('DoExam', data);
										}
									}
									if (this.text.listType == 2) {
										data.id = this.currentID;
										if (this.currentType == 'user') {
											res = await UserPracticeTeam('DoUpdate', data);
										} else if (this.currentType == 'manager') {
											res = await ManagePracticeTeam('DoUpdate', data)
										} else {
											res = await ManagePracticeTeamFlow('DoUpdateTeam',
												data)
										}
									}
									if (res.data.code === 0) {
										this.$message.success(res.data.msg);
										this.closeFunction('1');
									} else {
										this.$message.error(res.data.msg);
									}
								}
							})
						} else {
							let data = {};
							data = {
								...values,
								...this.formListItem
							};
							let res = {};
							data.SessionID = this.text.sessionID;
							if (values.TeacherUserNoArr) {
								data.TeacherUserNo = values.TeacherUserNoArr.join(',');
							}
							if (!this.currentID) {
								res = this.currentType == 'manager' ? await ManagePracticeTeam('DoAdd', data) :
									await UserPracticeTeam('DoAdd', data);
							}
							if (this.text.listType == 4) {
								if (this.currentType == 'userFlow') {
									data.id = this.text.flowID ? this.text.flowID : this.currentID;
									// data.id = this.currentID
									res = await UserPracticeTeamFlow('DoExam', data);
								}
								if (this.currentType == 'collegeFlow' || this.currentType == 'schoolFlow') {

									// let idstr =this.text.flowID!=undefined?this.text.flowID:this.currentID;
									let idstr = ''
									if (this.text.flowID != undefined) {
										idstr = this.text.flowID
									} else {
										idstr = this.currentID
									}
									if (idstr.split(',').length > 1) {
										let arr = idstr.split(',')
										for (let i = 0; i < arr.length; i++) {
											data.id = arr[i]
											res = await ManagePracticeTeamFlow('DoExam', data);
										}
									} else {
										data.id = this.text.flowID != undefined ? this.text.flowID : this
											.currentID
										res = await ManagePracticeTeamFlow('DoExam', data);
									}
								}
							}
							if (this.text.listType == 2) {
								data.id = this.currentID;
								if (this.currentType == 'user') {
									res = await UserPracticeTeam('DoUpdate', data);
								} else if (this.currentType == 'manager') {
									res = await ManagePracticeTeam('DoUpdate', data)
								} else {
									res = await ManagePracticeTeamFlow('DoUpdateTeam', data)
								}
							}
							if (res.data.code === 0) {
								this.$message.success(res.data.msg);
								this.closeFunction('1');
							} else {
								this.$message.error(res.data.msg);
							}
						}


					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item-label {
		width: 200px !important;
		text-align: center;
	}

	.autolabel {
		line-height: 20px;
		display: inline-block;
	}
</style>
